<template>
    <scroll-view
    class="album_scroll"
    scroll-y
    @scrolltolower="handeTolower"  
    >
        <!-- 轮播图 -->
        <view class="sw_warp">
            <swiper 
            indicator-dots 
            autoplay 
            circular
            indicator-active-color="#d4237a">
                <swiper-item 
                v-for="item in banners" :key="item.id">
                    <image :src="item.thumb"/>
                </swiper-item>
            </swiper>
        </view>
        <!-- 专辑列表 -->
        <view class="album_list">
            <navigator  class="album_item"
            v-for="item in albums"
            :key="item.id"
            :url="`/pages/album/index?id=${item.id}`">
                <view class="album_left">
                    <image mode="aspectFill":src="item.cover"/>
                </view>
                <view class="album_right">
                    <view class="album_name">{{item.name}}
                    </view>
                    <view class="album_desc">{{item.desc}}
                    </view>
                    <view class="album_btn">
                        <view class="btn">
                            +<text>关注</text>
                        </view>
                    </view>
                </view>
            </navigator>   
        </view>
    </scroll-view>
</template>

<script>

export default {
    data() {
        return {
            params:{
                limit:30,
                order:"new",
                skip:0
            },
            // 轮播图
            banners:[],
            // 专辑列表
            albums:[],
            // 是否还有下一页
            hasMore:true
        }
    },
    mounted() {
    //修改页面的标题
    uni.setNavigationBarTitle({title:"专辑"})
    this.getList();
   },
   methods: {
       //获取列表数据
       getList(){
           this.request({
               url:"http://157.122.54.189:9088/image/v1/wallpaper/album",
               data:this.params
           })
           .then(result=>{
            //    console.log(result);
                if(result.res.album.length === 0){
                    this.hasMore = false;
                    uni.showToast({
                    title:"没有更多数据了",
                    icon:"none"
                    });
                    return;
                }
                if(this.banners.length === 0){
                    this.banners = result.res.banner;
                }
               this.albums = [...this.albums,...result.res.album];
           })
       },
        // 加载下一页
       handeTolower(){
           if(this.hasMore){
               this.params.skip += this.params.limit;
                this.getList();
           }else{
               uni.showToast({
                    title:"没有数据了",
                    icon:"none"
               })
           }
       }
   },

}
</script>

<style lang="scss" scoped>
.album_scroll{
    height: calc( 100vh - 36px );
}
    .sw_warp{
        swiper{
            height: calc (750rpx / 2.3);
            image{
                height:100%;
            }
        }
    }
    .album_list{
        .album_item{
            padding:10rpx 0;
            display:flex;
            border:1rpx solid #efefef;  
            .album_left{
                flex:1;
                image{
                    width:226rpx;
                    height:180rpx;
                    padding:10rpx;
                }
            }
            .album_right{
                flex:2;
                overflow:hidden;
                .album_name{
                    font-size:30rpx;
                    font-weight:600;
                    color:#000;
                    padding:10rpx 0;
                }
                .album_desc{
                    font-size:24rpx;
                    text-overflow: ellipsis;
                    overflow:hidden;
                    white-space: nowrap;
                    padding:10rpx 0;
                }
                .album_btn{
                    padding:10rpx 0;
                    display:flex;
                    justify-content:flex-start;
                    .btn{
                        border:1rpx solid $color;
                        color:$color;
                        padding:5rpx 10rpx;
                        border-radius:5rpx;
                    }
                    
                }
            }
        }
    }
</style>